<template>
	<view
		class="slider"
		:style="{ height: `${height}px` }"
	>
		<!-- 滑动框头部区域 -->
		<view
			class="head_line"
			@click.stop="touchstartHandle"
			@touchend.stop="touchendHandle"
			@touchmove.stop="touchmoveHandle"
			@touchstart.stop="touchstartHandle"
			:style="{ height: `${ headerHeight }px` }"
		>
			<view class="line"></view>
		</view>
		<view class="slider-container">
			<scroll-view :scroll-y="true" style="height: 100%" @scrolltolower="$emit('down')">
				<slot></slot>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 上滑框的最小高度
			minHeight: {
				type: Number,
				default: 220
			},
			// 是否开启分层上滑 0表示不开启
			middleHeight: {
				type: Number,
				default: 0
			},
			// 最大高度差值，单位 px
			maxHeightDV: {
				type: Number,
				default: 0
			},
			// 上拉弹框顶部的高度
			headerHeight: {
				type: Number,
				default: 35
			}
		},
		mounted () {
			 const info = uni.getSystemInfoSync()
			 this.maxHeight = info.windowHeight - this.maxHeightDV
			 this.height = this.minHeight
		},
		data() {
			return {
				// 滑块最大高度值
				maxHeight: 1000,
				// 滑块实际高度值
				height: 230,
				// 首次按下的点坐标y所对应的值
				startY: 0,
				// 确认滑动方向，true 代表上滑，false 代表下滑
				up: true,
				// 确认是否触摸结束，true 代表触摸结束，false代表触摸开始
				flag: true
			};
		},
		methods: {
			touchstartHandle(e) {
				this.startY = e.touches[0].pageY;
			},
			touchendHandle() {
				if (this.up) {
					if (this.middleHeight) {
						this.height < this.middleHeight ? this.height = this.middleHeight : this.height = this.maxHeight
					} else {
						this.height = this.maxHeight
					}
				} else {
					this.height = this.minHeight
				}
				this.flag = true
			},
			touchmoveHandle(e) {
				// 手指滑动时所在的纵坐标位置
				let currentY = e.touches[0].pageY
				// 用户滑动的距离
				let transformHeight = currentY - this.startY
				this.height = this.height - (transformHeight / 20)
				// 滑块的最大高度不能大于设置的高度
				if (this.height > this.maxHeight) {
					this.height = this.maxHeight
				}
				// 滑块最小高度不能低于设置的最小高度
				if (this.height < this.minHeight) {
					this.height = this.minHeight
				}
				// 用户手指触摸结束后确定滑动方向
				if (this.flag) {
					this.flag = false
					this.up = transformHeight < 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slider {
		z-index: 999;
		position: absolute;
		bottom: 0;
		width: 100vw;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		transition-property: height;
		transition-duration: .5s;
		transition-timing-function: ease-in-out;

		.head_line {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.line {
				width: 37rpx * 2;
				height: 5rpx * 2;
				border-radius: 30rpx * 2;
				background-color: #676767;
			}
		}

		.slider-container {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
</style>
